<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Helper classes :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Helper classes</h1>

        @@adsense

        <h3>Margin classes</h3>
        <p>
            You can adjust the indentation of the item through classes: <span class="tag">marginX</span>.
            The available classes in the range from <spna class="tag">10</spna> to <span class="tag">100</span> with step <span class="tag">10</span>.
            To clean margin for element use classes <span class="tag">no-margin*</span>.
        </p>
        <div class="example" data-text="example">
            <div class="grid">
                <div class="row cells3">
                    <div class="cell debug">
                        <div class="margin20 bg-cyan fg-white align-center">margin20</div>
                    </div>
                    <div class="cell debug">
                        <div class="margin40 bg-cyan fg-white align-center">margin40</div>
                    </div>
                    <div class="cell debug">
                        <div class="margin60 bg-cyan fg-white align-center">margin60</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="example" data-text="example">
            <br />
            <div class="grid">
                <div class="row cells5">
                    <div class="cell debug">
                        <div class="margin10 bg-cyan fg-white align-center no-margin">no-margin</div>
                    </div>
                    <div class="cell debug">
                        <div class="margin10 bg-cyan fg-white align-center no-margin-left">no-margin-left</div>
                    </div>
                    <div class="cell debug">
                        <div class="margin10 bg-cyan fg-white align-center no-margin-right">no-margin-right</div>
                    </div>
                    <div class="cell debug">
                        <div class="margin10 bg-cyan fg-white align-center no-margin-top">no-margin-top</div>
                    </div>
                    <div class="cell debug">
                        <div class="margin10 bg-cyan fg-white align-center no-margin-bottom">no-margin-bottom</div>
                    </div>
                </div>
            </div>
            <br />
        </div>

        <h3>Padding classes</h3>
        <p>
            You can adjust the padding inside the element through classes: <span class="tag">paddingX</span>.
            The available classes in the range from <spna class="tag">10</spna> to <span class="tag">100</span> with step <span class="tag">10</span>.
            To clean padding for element use classes <span class="tag">no-padding*</span>.
        </p>
        <div class="example" data-text="example">
            <br />
            <div class="grid">
                <div class="row cells3">
                    <div class="cell ">
                        <span class="padding10 debug align-center">padding10</span>
                    </div>
                    <div class="cell ">
                        <span class="padding20 debug align-center">padding20</span>
                    </div>
                    <div class="cell ">
                        <span class="padding30 debug align-center">padding30</span>
                    </div>
                </div>
            </div>
            <br />
        </div>

        <div class="example" data-text="example">
            <br />
            <div class="grid">
                <div class="row cells5">
                    <div class="cell ">
                        <span class="padding10 debug  no-padding">no-padding</span>
                    </div>
                    <div class="cell ">
                        <span class="padding10 debug  no-padding-left">no-padding-left</span>
                    </div>
                    <div class="cell ">
                        <span class="padding10 debug  no-padding-right">no-padding-right</span>
                    </div>
                    <div class="cell ">
                        <span class="padding10 debug  no-padding-top">no-padding-top</span>
                    </div>
                    <div class="cell ">
                        <span class="padding10 debug  no-padding-bottom">no-padding-bottom</span>
                    </div>
                </div>
            </div>
            <br />
        </div>

        <h3>Floating</h3>
        <div class="example" data-text="exaample">
            <br />
            <div class="grid">
                <div class="row cells4">
                    <div class="cell debug">
                        <div class="place-left">place-left</div>
                    </div>
                    <div class="cell debug">
                        <div class="place-right">place-right</div>
                    </div>
                    <div class="cell debug">
                        <div class="no-float">no-float</div>
                    </div>
                    <div class="cell debug">
                        <div class="clear-float">clear-float</div>
                    </div>
                </div>
            </div>
            <br />
        </div>

        <h3>Shadows</h3>
        <div class="example" data-text="example">
            <br />
            <div class="grid">
                <div class="row cells5">
                    <div class="cell">
                        <div class="shadow align-center">shadow</div>
                    </div>
                    <div class="cell">
                        <div class="block-shadow align-center">block-shadow</div>
                    </div>
                    <div class="cell">
                        <div class="block-shadow-impact align-center">block-shadow-impact</div>
                    </div>
                    <div class="cell">
                        <div class="bottom-shadow align-center">bottom-shadow</div>
                    </div>
                    <div class="cell">
                        <div class="text-shadow bg-cyan fg-white align-center">text-shadow</div>
                    </div>
                </div>
                <div class="row cells5">
                    <div class="cell">
                        <div class="block-shadow-success align-center">block-shadow-success</div>
                    </div>
                    <div class="cell">
                        <div class="block-shadow-info align-center">block-shadow-info</div>
                    </div>
                    <div class="cell">
                        <div class="block-shadow-danger align-center">block-shadow-danger</div>
                    </div>
                    <div class="cell">
                        <div class="block-shadow-error align-center">block-shadow-error</div>
                    </div>
                    <div class="cell">
                        <div class="block-shadow-warning align-center">block-shadow-warning</div>
                    </div>
                </div>
            </div>
            <br />
        </div>

        <h3>Transform</h3>
        <div class="example" data-text="rotate">
            <div class="grid">
                <div class="row cells8">
                    <div class="cell">
                        <div class="padding10 margin10 rotate45">rotate45</div>
                    </div>
                    <div class="cell">
                        <div class="padding10 margin10 rotate90">rotate90</div>
                    </div>
                    <div class="cell">
                        <div class="padding10 margin10 rotate135">rotate135</div>
                    </div>
                    <div class="cell">
                        <div class="padding10 margin10 rotate180">rotate180</div>
                    </div>
                    <div class="cell">
                        <div class="padding10 margin10 rotate225">rotate225</div>
                    </div>
                    <div class="cell">
                        <div class="padding10 margin10 rotate270">rotate270</div>
                    </div>
                    <div class="cell">
                        <div class="padding10 margin10 rotate360">rotate360</div>
                    </div>
                </div>
            </div>
        </div>

        <h3>Video container</h3>
        <p>
            This is special class <span class="tag">video-container</span> to put video from any services as Youtube.
        </p>
        <div class="example" data-text="example">
            <div class="grid">
                <div class="row cells3">
                    <div class="cell">
                        <h5>Youtube</h5>
                        <div class="video-container">
                            <iframe src="https://www.youtube.com/embed/QNu5zwqUi98?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="cell">
                        <h5>Vimeo</h5>
                        <div class="video-container">
                            <iframe src="https://player.vimeo.com/video/86430443?color=ffffff&title=0&byline=0&portrait=0" frameborder="0"  allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="cell">
                        <h5>Apple :)</h5>
                        <div class="video-container">
                            <iframe src="http://images.apple.com/live/2015-mar-event/videos/5d330da0-6e5a-124a-8903-2020400c9a66/macbook/tour/reveal/macbook-reveal-cc-us-20150309_848x480.mp4" frameborder="0"  allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @@hit

</body>
</html>